坚强的小肥君  16:01:28
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">

    <base href="http://edu.bluej.cn/public/uploads/20180625/20180625095037ajax-neteasse/ajax-neteasse/"><br><title>网易云接口</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/table.css" />
</head>

<body>
    <div id="div1" class="box box-re form-inline">
        <input type="text" class="form-control" id="keywords" placeholder="搜索歌曲" value="">
        
        <button class="btn btn-info content" id="send">搜索</button>
        
        <div style="margin: 10px 0;">
            <button class="btn btn-info content disable" id="prev">上一页</button>
            <button class="btn btn-info content disable" id="next">下一页</button>
        </div>

        <div>
            <audio id="player" src="" controls></audio>
        </div>

        <table class="table table-bordered">
            <thead>
                <td>音乐标题</td>
                <td>歌手</td>
                <td>专辑</td>
                <td>时长</td>
            </thead>
            <tbody>

            </tbody>
        </table>

   <script>
       function ajax_tool(method,url,data,cb){
            let xhr = new XMLHttpRequest()
            //接下来，我们要根据不同的请求方式，将参数放在不同的地方
            if(method == "GET"){
                //get 操作对应拼接操作
                //注意的是两个地方：1.最前面➕？ 2.多个键值对通过&来链接
                let newUrl = url + '?'
                for(let key in data){
                    newUrl += `${key}=${data[key]}&`
                }
                newUrl = newUrl.slice(0,-1)
                xhr.open(method,newUrl)
                xhr.send()
            }else{
                //post 
                //专门用来拼接数据用到，拼接完毕之后放到send()中
                let postData = ""
          
                for(let key in data){
                    postData += `${key}=${data[key]}&`
                }
                postData = postData.slice(0,-1)
                xhr.open(method,url)
                //设置发送请求的格式，是以字符串的形式发送的
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                //注意：关于请求头的设置，一定要放在open()之后，大家记住就好
                xhr.send(postData)
            }
            //get请求 拼接到url上
            //post请求 放到send参数  设置格式
            //不管是哪种方式都是键值对形式存放
            // xhr.open(method,url)
            // xhr.send()
            xhr.addEventListener('readystatechange',function(){
                if(xhr.readyState == 4){
                    if(xhr.status === 200){
                        // xhr.responseText 
                        cb(JSON.parse(xhr.responseText))
                    }
                }
            })
        }

       function render(data){
           tbody.innerHTML = ``;
           console.log(data)
           total = data.result.songCount
           //方便后续的操作
           let songs = data.result.songs
           songs.forEach(function(ele){
            tbody.innerHTML += `
                                <tr>
                                    <td data-id=${ele.id}>
                                        ${ele.name}
                                    </td>
                                    <td>
                                        ${ele.artists[0].name}
                                    </td>
                                    <td>
                                        ${ele.album.name}
                                    </td>
                                    <td>
                                        ${ele.duration}
                                    </td>
                                </tr>
                              `
       
           });
           //渲染页面
           //渲染API createElment  innerHTML
        }
       let tbody = document.querySelector('tbody')
       let send = document.querySelector('#send')
       let keywords = document.querySelector('#keywords')
       let next = document.querySelector('#next')
       let prev = document.querySelector('#prev')
       let player = document.querySelector('#player')
       let total = 0;//歌曲总数
       let count =0;
       let url = ""
       let data = {
               keywords:'',
               limit:10,
               offset: count * 10
            //limit这个参数的作用 用来限制响应数据、
            //    假设 药水哥 60首
            //    但是因为 一次的请求 只请求前10首
            //    页数 1  前10首
            //     页数2  11-20
            //    总页数 6
            //所以分页请求的操作，如下：
            // 1.通过按下上一页或下一页的按钮，对offset做 ++ 或 -- 
            // 2.通过新的offset值去请求新的数据（新的歌单信息）
            //3.将我们新数据重新通过dom操作渲染到页面

           }
        tbody.addEventListener('click',function(e){
            //怎么去判断点的是按个td呢？
            //e.target 返回点击的那个节点
            console.log(e.target.dataset.id)
            player.src = `https://music.163.com/song/media/outer/url?id=${e.target.dataset.id}.mp3`
            player.play()
            //自动播放方法
        })
        prev.addEventListener('click',function(){
            //做一个边界的判断
            if(count == 0){
                alert('已经是第一页')
                return
            }
            count--
            data.offset = count * 10
           ajax_tool("GET",
                "http://netease.0melon0.cn/search",
                data,
                render)
        })
       next.addEventListener('click',function(){
           console.log(data)
           //600/10 60 
        //    if((total/data.limit-1) == data.offset){
        //        alert('最后一页')
        //        return
        //    }
            count++
            data.offset = count * 10
            console.log(data)
           ajax_tool("GET",
                "http://netease.0melon0.cn/search",
                data,
                render)

       })
       send.addEventListener('click',function(){
           //获取ipt 的value 
            data.keywords = keywords.value
            ajax_tool("GET",
                "http://netease.0melon0.cn/search",
                data,
                render)
       })
   </script>
</body>

</html>